<!-- /*
 * @Author: mikey.zhaopeng 
 * @Date: 2023-04-19 13:19:38 
 * @Last Modified by:   mikey.zhaopeng 
 * @Last Modified time: 2023-04-19 13:19:38 
 */ -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background: url('/static/login_background.jpg') no-repeat;
            background-size: cover;
        }

        #register_box {
            width: 30%;
            height: 19rem;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            margin-bottom: 10%;
            text-align: center;
            border-radius: .3125rem;
            padding: 1.5625rem 1.5625rem;
        }

        h1 {
            color: #ffffff90;
            margin-top: 5%;
        }

        span {
            color: #fff;
        }

        input {
            border: 0;
            width: 80%;
            font-size: 1rem;
            color: #fff;
            background: transparent;
            border-bottom: .0625rem solid #fff;
            padding: .1563rem .3125rem;
            outline: none;
            margin-top: 1.625rem;
        }

        button {
            margin-top: 1rem;
            width: 80%;
            height: 2.2625rem;
            border-radius: .3125rem;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: .9375rem;
            font-size: .4688rem;
            background-image: linear-gradient(to right, #30cfd0, #330867);
        }

        #sign_up {
            margin-top: 45%;
            margin-left: 60%;
        }

        a {
            color: #b94648;
        }

        .register {
            display: none;
        }
    </style>
</head>

<body>
    <div id="register_box">
        <h1>REGISTER</h1>
        <!-- <form> -->
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <input type="password" name="password" placeholder="请输入密码" id="password">
        <input type="password" name="password2" placeholder="请确认密码" id="password2">
        <button onclick="Register()">确认注册</button>
        <button onclick="location.href='/'">返回</button>
        <!-- </form> -->

    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<script>
    var httpUrl = "/register/"
    function Register() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;

        if (password != password2) {
            alert("密码输入不一样，请重新输入！");
            return;
        }
        password = md5(password)
        username = md5(username)
        $.ajax({
            url: httpUrl,
            type: 'post',
            dataType: 'json',
            data: {
                username: username,
                password: password
            },
            success: function (data) {
                console.log(data);
                if (data.code == 201) {
                    alert(data.msg);
                }
                else {
                    alert(data.msg);
                    location.href = "/home"
                }
            },
            error: function (error) {
                console.log(error);
            }
        })
    }
</script>

</html>